<template>
	<view>
		<view class="box-title">
			<view class="box-t-head">
				<text class="box-t-head-l">定期精选</text>
				<text class="box-t-head-r">超900,000 + 人购买</text>
			</view>
			<view class="box-content">
				<text>收益稳健，轻松理财；申述灵活，使用方便；严控风险，省心之选；精品热销，先到先得。</text>
			</view>
		</view>
		<!-- <swiper></swiper> -->
		<view class="dong_wapper">
			<view class="wapper_li">
				<view class="btn" v-for="(item,index) in li_head" :key="item" :class="{active: li==index}"
					@tap="changeli(index)">
					<text class="btn-text">{{item}}</text>
				</view>
			</view>
			<view class="container">
				<view class="swiper-item">
					<scroll-view scroll-y="true" class="swiper_scroll" show-scrollbar>
						<view class="swiper_scroll_box" v-for="(item,index) in  RegularIntervals" :key="item.id">
							<view class="swiper_scroll_box_content">
								<view class="swiper_scroll_box_conten_head" @tap="goDetail(item.id)">{{item.name}}
									<view class="t" v-if="item.description">{{item.description}}</view>
								</view>
								<view class="swiper_scroll_box_content_num">
									<view class="swiper_scroll_box_content_num_l">
										<text
											class="swiper_scroll_box_content_num_l_t1">{{(item.yieldrate * 100).toPrecision(3)}}0%</text>
										<text class="swiper_scroll_box_content_num_l_t2">\n每期反息收益率</text>
									</view>
									<view class="swiper_scroll_box_content_num_r">
										<text class="swiper_scroll_box_content_num_l_t3">{{item.datestr}}</text>
										<text class="swiper_scroll_box_content_num_l_t4">\n{{item.startmoney}}元起</text>
									</view>
								</view>
							</view>

						</view>
						<view class="swiper_scroll_txt1"><text>没有找到合适的产品？去逛逛基金吧</text></view>
					</scroll-view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// import  swiper from '@/components/regularIntervals/swiper.vue'

	import {
		createNamespacedHelpers
	} from "vuex"
	const {
		mapState,
		mapMutations,
		mapActions
	} = createNamespacedHelpers("products")
	export default {
		data() {
			return {
				li: 0,
				li_head: ["全部", "60天以内", "60天-1年", "1年以上"],
			}
		},

		onLoad() {
			this.getRegularIntervals({
				type: "0"
			})
			console.log(this.RegularIntervals)
		},

		computed: {
			...mapState(["RegularIntervals"]),

		},
		methods: {
			...mapActions(["getRegularIntervals"]),
			changeli(index) {
				this.li = index
				switch (index) {
					case 0:
						this.getRegularIntervals({
							type: "0"
						});
						break;
					case 1:
						this.getRegularIntervals({
							type: "0",
							startTime: 0,
							endTime: 59
						});
						break;
					case 2:
						this.getRegularIntervals({
							type: "0",
							startTime: 59,
							endTime: 364
						});
						break;
					case 3:
						this.getRegularIntervals({
							type: "0",
							startTime: 364,

						});
						break;

				}
			},

			//一键购买
			...mapActions(["getRegularIntervals"]),
			//一键购买跳转
			goDetail(id) {
				console.log(id, "获取id")
				uni.navigateTo({
					url: "/pagesD/gold-detail/gold-detail?_id=" + id
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.box-title {
		margin-top: 40rpx;
		margin-bottom: 20rpx;

		.box-t-head {
			box-sizing: border-box;
			padding: 0 40rpx;
			display: flex;
			justify-content: space-between;

			.box-t-head-l {
				width: 128rpx;
				height: 44rpx;
				font-family: PingFang SC;
				font-size: 32rpx;
				font-weight: normal;
				font-stretch: normal;
				line-height: 44rpx;
				letter-spacing: 0rpx;
				color: #323232;
				vertical-align: middle;
			}

			.box-t-head-r {

				font-size: 20rpx;
				font-weight: normal;
				font-stretch: normal;
				line-height: 28rpx;
				letter-spacing: 0rpx;
				color: #161616;
				margin-top: 10rpx;
			}

		}

		.box-content {
			width: 670rpx;
			// height: 68rpx;
			font-size: 24rpx;
			font-weight: normal;
			font-stretch: normal;
			line-height: 34rpx;
			letter-spacing: 0rpx;
			color: #474747;
			opacity: 0.7;
			margin: 16rpx auto;
			border-bottom: 1px solid #E0E0E0;
			padding-bottom: 12rpx;
		}
	}

	.dong_wapper {
		.wapper_li {
			box-sizing: border-box;
			padding: 10rpx 40rpx;
			display: flex;
			justify-content: space-between;
			width: 600rpx;

			.btn {
				height: 52rpx;
				line-height: 50rpx;
				color: #9a9a9a;
				border-radius: 12rpx;
				box-sizing: border-box;
				padding: 0rpx 20rpx;

				.btn-text {
					height: 34rpx;
					font-size: 24rpx;
					font-weight: normal;
					font-stretch: normal;
					line-height: 24rpx;
					letter-spacing: 0rpx;

				}

			}

			.active {
				background-color: #007aff;
				color: #ffffff;
			}
		}
	}

	.container {

		.swiper-item {
			height: 100%;

			.swiper_scroll {
				height: calc(100vh - 246rpx);

				.swiper_scroll_txt1 {
					width: 320rpx;
					height: 28rpx;
					font-size: 20rpx;
					font-weight: normal;
					font-stretch: normal;
					line-height: 28rpx;
					letter-spacing: 0rpx;
					color: #9a9a9a;
					text-align: center;
					margin: 0 auto;
				}

				.swiper_scroll_box {
					box-sizing: border-box;
					padding: 40rpx;

					.swiper_scroll_box_content {
						// height: 300rpx;
						border-bottom: 1px solid #F0F0F0;
						padding-bottom: 20rpx;

						.swiper_scroll_box_conten_head {
							// width: 542rpx;
							height: 44rpx;
							font-size: 32rpx;
							font-weight: bold;
							font-stretch: normal;
							line-height: 44rpx;
							letter-spacing: 0rpx;
							color: #323232;
							display: flex;

							.t {
								text-align: center;
								width: 108rpx;
								height: 36rpx;
								line-height: 34rpx;
								border-radius: 18rpx;
								border: solid 2rpx #007aff;
								font-size: 20rpx;
								color: #007aff;
							}
						}

						.swiper_scroll_box_content_num {
							display: flex;
							justify-content: space-between;
							font-size: 24rpx;
							font-weight: normal;
							font-stretch: normal;
							line-height: 34rpx;
							letter-spacing: 0rpx;
							color: #9a9a9a;
							margin-top: 10rpx;
							width: 480rpx;


							.swiper_scroll_box_content_num_l {

								.swiper_scroll_box_content_num_l_t1 {
									width: 120rpx;
									height: 48rpx;
									font-size: 40rpx;
									color: #ff1d1d;

								}

								.swiper_scroll_box_content_num_l_t2 {
									width: 168rpx;
									height: 34rpx;
									font-family: PingFang SC;
									font-size: 24rpx;
									font-weight: normal;
									font-stretch: normal;
									line-height: 34rpx;
									letter-spacing: 0rpx;
									color: #9a9a9a;
								}
							}

							.swiper_scroll_box_content_num_r {
								.swiper_scroll_box_content_num_l_t3 {
									width: 104rpx;
									height: 44rpx;
									font-size: 32rpx;
									font-weight: normal;
									font-stretch: normal;
									line-height: 44rpx;
									letter-spacing: 0rpx;
									color: #2d2d2d;
								}

								.swiper_scroll_box_content_num_l_t4 {
									width: 168rpx;
									height: 34rpx;
									font-size: 24rpx;
									font-weight: normal;
									font-stretch: normal;
									line-height: 34rpx;
									letter-spacing: 0rpx;
									color: #9a9a9a;
								}
							}
						}
					}

				}
			}
		}
	}
</style>
